@import "common";

html{width: auto;margin: 0;}
#body{position: relative;}

.fixed-box{
    .img-list{display: none!important;}
}

.body-bg{
    position: absolute;z-index: -1;top: 0;left: 0;bottom: 0;width: 100%;min-width: @content;
    li{
        width: 100%;background: center top no-repeat;
        &.bg-1{height: 1206px;background-image: url('/src/img/bg-1.jpg');}
        &.bg-2{height: 1206px;background-image: url('/src/img/bg-2.jpg');}
        &.bg-3{height: 1206px;background-image: url('/src/img/bg-3.jpg');}
        &.bg-3-1{height: 1206px;background-image: url('/src/img/bg-4.jpg');}
        &.bg-4{height: 1206px;background-image: url('/src/img/bg-5.jpg');}
        &.bg-5{height: 1519px;background-image: url('/src/img/bg-6.jpg');}
    }
}

.header{
    .title{
        padding: 290px 0 0 680px;height: 820px;box-sizing: border-box;
        .date{margin-bottom: 20px;width: 274px;height: 354px;background: url("/src/img/date.png") no-repeat;}
        .btn{display: inline-block;width: 196px;height: 69px;background: url("/src/img/btn-sgin.png") no-repeat;}
    }
    .infos{
        width: 1120px;margin: 0 auto;height: 484px;box-sizing: border-box;padding: 42px 55px;background: rgba(255,255,255,0.8) url("/src/img/info-bg.png") right -120px bottom -210px no-repeat;
        .left{
            float: left;width: 500px;height: 100%;
            .tit{height: 64px;background: url("/src/img/info-tit-bg.jpg") no-repeat;
                a{float: left;height: 100%;width: 50%;text-align: center;line-height: 64px;font-size: 24px;color: #fff;
                    &.active{color: #f27860;background-color: rgba(191,43,57,0.8)}
                }
            }
            .video{background-color: #eee;height: 336px;
                .video-js{width: 100%;height: 100%;
                    .vjs-big-play-button{top: 145px;left: 200px;}
                }
            }
        }
        .right{
            float: left;margin-left: 100px;width: 280px;padding-top: 8px;
            .tit{margin-top: 14px;
                img{display: block;}
            }
            .cont{font-size: 14px;margin-top: 14px;line-height: 22px; text-indent: 2em;
                &:last-child{ height:180px; overflow-y: scroll;}
            }
        }
    }
}

.title-1{
    margin-top: 160px;height: 620px;
    .img{height: 173px;background: url("/src/img/title-1.png") top center no-repeat;}
    .img2{background: url("/src/img/title-1.png") center bottom -30px no-repeat;height: 150px;}
    .cont{
        padding: 15px 0 15px 310px ;
        &:last-child{padding:15px 300px;}
        &:after{content: '';display: block;clear: both;}
        li{
            float: left;font-size: 14px;width: 202px;text-align: center;
            &.text{line-height: 24px;}
            &.icon{width: 304px;}
            &.user{
                padding: 10px 25px 0; box-sizing: border-box; width:200px;
                a{display: inline-block;width: 45px;height: 45px;border-radius: 100%;;background: no-repeat center center / cover;margin: 0 2px;position: relative;box-sizing: border-box;
                    &:hover{border: 3px solid @red;
                        & .disc{display: block;z-index: 10000;}
                    }
                    .disc{
                        position: absolute;width: 250px;padding: 15px;background-color: rgba(191,43,57,0.9);bottom: 62px;left: -100px;color: #ffb8bf;font-size: 14px;display: none;text-align: justify;
                        &:before{content: '';position: absolute;width: 18px;height: 13px;background: url("/src/img/icon-more.png") no-repeat;bottom: -13px;left: 110px;}
                        b{color: #fff;margin-right: 5px;}
                    }
                }
            }
        }
    }
}

.title-2{
    margin-top: 120px;height: 738px;background: url("/src/img/title-2.png") center center no-repeat;
}

.title-3{
    margin-top: 140px;height: 640px;background: url("/src/img/title-3.png") center center no-repeat;
}

.title-3-1{
    margin-top: 140px;height: 650px;background: url("/src/img/title-3-1.png") center center no-repeat;
}

.title-4{
    margin-top: 350px;
    .title{
        height: 41px;background: url("/src/img/title-4-new.png") center center no-repeat;
    }
    .lists{
        margin: 0px 0 0 -24px;overflow: hidden;
        .li{
            float: left;width: 250px;height: 258px;border-radius: 8px;background-color: #fff;margin-left: 50px;margin-top: 70px;overflow: hidden;background-color: #2e2e38;text-align: center;position: relative;cursor: pointer;
            .head{height: 160px;width: 130px;margin: 0 auto;background-color: #ddd;background: center center / cover no-repeat;}
            .name{margin-top: 20px;font-size: 18px;color: #fff;}
            .disc{margin-top: 10px;font-size: 14px;color: #ffd2b1;}
            .option{
                position: absolute;bottom: 0;left: 0;right: 0;height: 48px;border-top: 1px solid #444;
                div{width: 50%;float: left;color: #fff;line-height: 48px;font-size: 14px;
                    &:last-child{background-color: #751a23;}
                    b{font-size: 18px;}
                }
            }
        }
    }
    .btn{
        display: block;width: 276px;height: 99px;margin: 60px auto 0;background: url("/src/img/title-4-btn.png") no-repeat;
    }
    .sign-way-open2{
        display: block;width: 125px;height: 28px;margin: 20px auto 0;background: url("/src/img/title-4-btn-2.png") no-repeat;
    }
}

.title-4-1{
    margin-top: 350px; text-align:center;
    .title{
        height: 41px;background: url("/src/img/title-4-1.png") center center no-repeat;
    }
    .btn{
        display: inline-block;width: 276px;height: 69px;margin: 50px auto 0;background: url("/src/img/title-4-1-btn.png") 50% 50% no-repeat;
        &:last-child{
            background: url("/src/img/title-4-2-btn.png") 50% 50% no-repeat;
        }
    }
}

.title-5{
    margin-top: 200px;
    .title{
        height: 41px;background: url("/src/img/title-5.png") center center no-repeat;
    }
    .mains{
        margin-top: 90px;height: 370px;
        .focus-left{
            float: left;height: 100%;width: 550px;margin-left: 46px;position: relative;
            &:before{
                content: '';position: absolute;z-index: 8;width: 550px;height: 100%;left: 17px;top: 17px;background-color: #333;
            }
            .focus-left-swiper{
                height: 100%;z-index: 9;
                .swiper-slide{
                    background: url("/src/img/test.jpg") center center / cover no-repeat;
                    span{position: absolute;left: 0;;right: 0;bottom: 0;line-height: 70px;font-size: 18px;color: #fff;text-align: center;background-color: rgba(0,0,0,0.6);}
                }
            }
            .title-tag{
                position: absolute;height: 70px;left: 0;right: 0;bottom: 0;z-index: 10;
                i{width: 70px;height: 70px;float: left;background: url("/src/img/title-5-left.png") center center no-repeat;cursor: pointer;
                    &.focus-icon-right{float: right;background-image: url("/src/img/title-5-right.png");}
                }
            }
        }

        .focus-right{
            float: right;height: 350px;width: 530px;margin-right: 10px;position: relative;padding-top: 14px;
            .focus-right-swiper{
                height: 100%;z-index: 9;
                .swiper-slide{
                    .li{
                        height: 70px;
                        .date{
                            float: left;width: 70px;height: 70px;position: relative;text-align: center;box-sizing: border-box;padding-top: 12px;font-size: 14px;color: #999;
                            b{color: #666;font-size: 24px;}
                            &:before{
                                content: '';position: absolute;width: 26px;height: 26px;border:2px solid #999;left: 20px;top: 22px;transform: rotate(45deg);box-sizing: border-box;
                            }
                        }
                        .tit{
                            line-height: 70px;margin-left: 84px;font-size: 16px;width: 446px;overflow: hidden;
                        }
                    }
                }
                .focus-right-swiper-page{
                    background-color: #e3e3e3;padding: 5px;border-radius: 30px;
                    .swiper-pagination-bullet{background-color: #554848;opacity: 1;}
                    .swiper-pagination-bullet-active{background-color: #e32128;}
                }
            }
        }
    }
}

.footer{
    margin-top: 380px;text-align: center;color: #999;font-size: 16px;line-height: 40px;
}

.judge-info{
    position: relative;z-index: 105;
    .cover{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.75);}
    .cont-box{
        position: fixed;width: 680px;height: 300px;top: 50%;left: 50%;margin-top: -150px;margin-left: -340px;
        .close{position: absolute;width: 40px;height: 40px;right: 0;top: -40px;background: url("/src/img/close.png") center / cover no-repeat;}
        .head{
            float: left;width: 300px;height: 100%;background: #ddd center center /cover no-repeat;position: relative;
            &:before{
                content: '';position: absolute;top: 10px;left: 10px;right: 10px;bottom: 10px;border: 2px solid #fff;
            }
        }
        .cont{
            float: left;width: 380px;height: 280px;background-color: #fff;margin-top: 10px;box-sizing: border-box;padding: 30px;
            .name{font-size: 24px;color:@red;}
            .disc{font-size: 16px;margin-top: 15px;line-height: 24px;}
            .text{
                line-height: 20px;color: #999;font-size: 12px;margin-top: 18px;max-height: 120px;overflow: auto;
            }
        }
    }
}


















